<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>
        Circular movement
    </title>
</head>
<body>

<h1>Circular movement</h1>

<div style="position: absolute;top:-100px;
background-color: red;
border-radius: 50px;
left:-100px;" id="t">

</div>

<div id='t2'
     style="position: absolute;
border: 1px solid red;
border-radius: 100px;
">
</div>

<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/anim/config.js"></script>
<script>
    KISSY.use('core', function (S) {
        var t = S.all('#t'),
                t2 = S.all('#t2'),
                R = 10, R2 = 100, N = 100;
        t.css({
            width: 2 * R,
            height: 2 * R
        });

        t2.css({
            left: N,
            top: N,
            width: 2 * R2,
            height: 2 * R2
        });

        function filter(f) {
            if (Math.abs(f) < 1e-10) {
                return 0;
            }
            return f;
        }

        function translate(x) {
            return x + R2 + N - R;
        }

        t.css({
            left: translate(R2),
            top: translate(0)
        });

        function run() {
            S.all('#t').animate({
                zoom2: {
                    fx:{
                        frame: function (anim,fx) {

                            t.css('top', translate(filter(Math.sin(fx.pos * 2 * Math.PI)) * R2));
                            t.css('left', translate(filter(Math.cos(fx.pos * 2 * Math.PI)) * R2))
                        }
                    }
                }
            }, {
                easing: "easingNone",
                duration: 5,
                complete: run
            });
        }

        run();

    });
</script>
</body>
</html>